<template>
	<view class="buy">
		<view class="buy_head" :style="{'paddingTop':StatusBar + 'px'}">
			<view class="head_tab">
				<view class="tab_item" :class="tab_current == item.id ? 'current' : ''" v-for="item in tab_list" :key="item.id" @click="tapTab(item.id)">
					<image :src="item.img" mode="widthFix"></image>
					<view class="item_box">{{item.text}}</view>
				</view>
			</view>
			<view class="head_search">
				<u-search bgColor="#F7F7F7" placeholder="请输入您想查找的游戏名" v-model="keyword" :showAction="false" @clear="search">
				</u-search>
			</view>
		</view>
			<view class="buy_list">
					<mescroll-uni  :down="downOption" :up="upOption"  :fixed="false" ref="mescrollRef" @init="mescrollInit"
									@down="downCallback" @up="upCallback">
					<view class="list_item" @click="navigateTo('popularGames')" v-for="item in game_data" :key="item.id">
						<view class="item_head">
							<view class="head_number">在售账号：1600个</view>
						</view>
						<view class="item_icon">简 介</view>
						<view class="item_tips">{{item.name}}</view>
					</view>
					</mescroll-uni>
			</view>
		<k-tabbar />
	</view>
</template>

<script>
	
	import { game_list } from '@/api/game'
	export default {
		data() {
			return {
				tab_list: [
					{id: 1, text: '全部', img: "../../static/buy/qb.png"},
					{id: 2, text: '手游', img: "../../static/buy/sy.png"},
					{id: 3, text: '端游', img: "../../static/buy/dy.png"}
				],
				game_data: [],
				tab_current: 1,
				keyword: "",
				StatusBar: this.StatusBar,
				mescroll: null,
				downOption: {
					auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
					textInOffset: '下拉刷新', // 下拉的距离在offset范围内的提示文本
					textOutOffset: '释放更新', // 下拉的距离大于offset范围的提示文本
					textLoading: '更新中 ...', // 加载中的提示文本
					offset: 40,
				},
				upOption: {
					auto: false, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
					bgColor: "transparent", // 背景颜色 (建议在pages.json中再设置一下backgroundColorTop)
					textColor: "gray", // 文本颜色 (当bgColor配置了颜色,而textColor未配置时,则textColor会默认为白色)
					textLoading: '加载中 ...', // 加载中的提示文本
					textNoMore: '-- 没有更多了 --', // 没有更多数据的提示文本
					offset: 1,
					noMoreSize: 2,
					empty: {
						icon: '',
						tip: '没有数据~试试修改筛选条件或查看其他游戏'
					},
					page: {
						num: 1,
						size: 10
					}
				},
				page: 1,
				pageSize: 10,
				total: null, //服务器数量
				localTotal: 0, //本地已经加载数量
			}
		},
		onLoad() {
			this.downCallback()
		},
		methods: {
			tapTab(id){
				this.tab_current = id
			},
			// mescroll组件初始化的回调,可获取到mescroll对象 https://www.mescroll.com/uni.html#options
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
				// //全部禁止执行
				this.mescroll.lockDownScroll(true)
				this.mescroll.lockUpScroll(true)
				this.mescroll.removeEmpty()
			},
			async game_list() {
				let param = {
					page: this.page,
					pageSize: this.pageSize
				}
				let data = await game_list(param)
				data = data.data
				if (this.page == 1) {
					this.game_data = data.list
					this.mescroll.lockDownScroll(false)
					this.mescroll.lockUpScroll(false)
				} else {
					this.game_data = [...this.game_data, ...data.list]
				}
				
				this.total = data.page.total
				
				if (this.page == 1) {
					this.localTotal = data.list.length
				} else {
					this.localTotal += data.list.length
				}
				console.log(this.localTotal)
				console.log(this.total)
				this.mescroll.endSuccess(data.list.length, this.localTotal < this.total)
			},
			downCallback() {
				this.page = 1
				this.game_list()
			},
			upCallback(page) {
				this.page += 1
				this.game_list()
			},
			
		}
	}
</script>
<style>
	page {
		background: #F7F8FA;
	}
</style>
<style  lang="scss" scoped>
 .buy {
	 height: 100vh;
	 display: flex;
	 flex-direction: column;
	.buy_head {
		height: 236rpx;
		background-color: #fff;
		padding: 0 32rpx;
		box-sizing: border-box;
		.head_tab {
			display: flex;
			align-items: flex-end;
			padding-top: 12rpx;
			.tab_item {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				width: 108rpx;
				margin-right: 30rpx;
				image {
					width: 100%;
				}
	
				.item_box {
					width: 100%;
					height: 60rpx;
					background: #FFFEE8;
					border-radius: 0rpx 0rpx 24rpx 24rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 32rpx;
					color: #606060;
				}
				&.current {
					.item_box{
						background: #FFE78F;
						color: #663714;
						font-weight: bold;
					}
				}
			}
		}
		.head_search {
			padding: 20rpx 0;
		}
	}
	.buy_list{
		flex: 1;
		padding: 0 32rpx 166rpx;
		overflow-y: scroll;
		.list_item {
			margin-top: 16rpx;
			width: 100%;
			height: 260rpx;
			background: url(~@/static/buy/yjwj.png) no-repeat;
			background-size: 100%;
			&:nth-last-child(1) {
				padding-bottom: 166rpx;
			}
			.item_head {
				display: flex;
				.head_number {
					margin-left: auto;
					padding: 12rpx 24rpx;
					background: linear-gradient( 90deg, #C05059 0%, rgba(217,217,217,0) 100%);
					border-radius: 27rpx 27rpx 27rpx 27rpx;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
			.item_icon {
				margin: 130rpx 0 0 24rpx;
				width: 74rpx;
				height: 30rpx;
				background: #000000;
				border-radius: 27rpx 27rpx 27rpx 27rpx;
				opacity: 0.22;
				color: #fff;
				font-size: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.item_tips {
				margin: 4rpx 24rpx 0;
				font-size: 20rpx;
				color: #FFFFFF;
				line-height: 23rpx;
				text-align: left;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
			}
		}
	}
 }

</style>
